<!-- 层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

CSS像艺术家一样优雅，像工程师一样严谨。

我们来看一个例子，就知道什么叫层叠性了。 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      #box1 {
        color: red;
      }
      
       #box3 {
        color: blue;
      }

       #box2 {
        color: green;
      }
    </style>
</head>
<body>
  <!-- 如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的 -->
    <div id="box1">
      <div id="box2">
        <div id="box3">
          <p>猜猜我时什么颜色</p>
        </div>    
      </div>
    </div>
</body>
</html>
<!-- 
选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

行级样式 > 内嵌样式表 > 外部样式表
对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
外部样式表的ID选择器 > 内嵌样式表的标签选择器
-->